import React, { Component } from 'react';
import { Button, DatePicker, Select, Row, Col, Input, Image } from 'antd';
import { observer } from 'mobx-react';
import { history } from 'umi';
import styles from './index.less';
import GalleryModel from '@/models/gallery';
import { galleryStore } from '@/stores/galleryStore';
import Header from '../components/header/index';
import Footer from '../components/footer';
import { SearchOutlined } from '@ant-design/icons';
import newsStore from '@/stores/newsStore';

@observer
export default class Appreciation extends Component {

  componentDidMount() {
    galleryStore.listGallery();
  }
  inputChange(e: any) {
    console.log(e);
    let key = e.target.name;
    let value = e.target.value;
    console.log(key);
    switch (key) {
      case 'title':
        galleryStore.title = value;
        break;
      default:
        break;
    }
  }

  // resetChange() {
  //   newsStore.title = undefined;
  //   newsStore.organizer = undefined;
  // }

  selectField(e: any, option: any) {
    galleryStore.status = e;
    galleryStore.statusName = option.children;
  }
  selectTag(e: any, option: any) {
    galleryStore.tag = e;
    galleryStore.tagName = option.children;
  }
  render() {
    const { RangePicker } = DatePicker;
    const { Option } = Select;
    /**
     * 最新资讯
     */
    let list: Array<GalleryModel> = galleryStore.galleryList;
    let galleryArr = [];
    for (let i = 0; i < list?.length; i++) {
      galleryArr.push(
        <Row className={styles.now_container}>
          <Col span={10} className={styles.now_pic}>

            <Image src={galleryStore.imageURL + list[i].cover} className={styles.now_pic_img} />

          </Col>
          <Col span={14} style={{ marginTop: 'auto', marginBottom: 'auto', paddingLeft: '10px' }}>
            <div className={styles.now_title} onClick={() => history.push({ pathname: "/appinfo", query: { id: list[i].id } })} >名称：{list[i].title}</div>
            <div className={styles.now_tips}>展出信息：{list[i].statusName}</div>
            <div className={styles.now_tips}>类别：{list[i].tagName}</div>
            <div className={styles.now_tips}>作者：{list[i].writter}</div>
            <div className={styles.now_tips}>创作背景：{list[i].createBackground}</div>

          </Col>
        </Row> as never
      )
    }
    return (
      <div>
        <Header />
        <div className={styles.content_container}>
          <Row className={styles.search_box}>
            <Input
              placeholder="请输入标题"
              name='title'
              className={styles.input1}
              onChange={this.inputChange}
            />
            <div>

              <Select placeholder='请选择作品类别' allowClear className={styles.select}
                onSelect={(value, option) => this.selectTag(value, option)}
                value={galleryStore.tagName}
              >
                <Option value="1">国画</Option>
                <Option value="2">水墨画</Option>
                <Option value="3">素描</Option>
                <Option value="4">油画</Option>
                <Option value="5">漫画</Option>
                <Option value="6">简笔画</Option>
                <Option value="7">风景画</Option>

              </Select>
            </div>
            <div>
              <Select placeholder='请选择展出信息' allowClear className={styles.select}
                onSelect={(value, option) => this.selectField(value, option)}
                value={galleryStore.status}
              >
                <Option value="1">未展出</Option>
                <Option value="2">正在展出</Option>
                <Option value="3">未展出</Option>
              </Select>
            </div>

            {/* <Input
              placeholder="请输入主办方单位"
              className={styles.input1}
              name="tag"
              onCha
            /> */}
            {/* <RangePicker /> */}
            <Button className={styles.search_btn} onClick={() => galleryStore.listGallery()}>搜索<SearchOutlined style={{ fontSize: '16px' }} /></Button>
            {/* <Button className={styles.search_btn} onClick={() => {

            }} */}
          </Row>

          <div className={styles.now_devider}></div>
          <div className={styles.now_box}>
            <div className={styles.title_top}>正在展出</div>
            {galleryArr}
          </div>
          {/* 展览回顾 */}
          {/* <div className={styles.now_devider}></div>
          <div className={styles.now_box}>
            <div className={styles.title_top}>展览回顾</div>
            {galleryArr}
          </div> */}
        </div>
        <Footer />
      </div>
    )
  }
}